﻿<!doctype html>
<html class="no-js" lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- all css here -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/css/slicknav.min.css">
<link rel="stylesheet" href="assets/css/swiper.min.css">
<link rel="stylesheet" href="assets/css/typography.css">
<link rel="stylesheet" href="assets/css/default-css.css">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/responsive.css">
<!-- modernizr css -->
<script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>
</head>

<body>
<!--[if lt IE 8]>
		<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
	<![endif]-->
<!-- preloader area start -->
<!---<div id="preloader">
	<div class="loader"></div>
</div>--->
<!-- prealoader area end -->
<!-- header area start -->
<header>
	<div class="header-area tpheader-two">
		<div class="container">
			<div class="row align-items-center">
				<div class="col-lg-3">
					<div class="logo">
						<a href="index.html">
							<img src="assets/images/icon/logo-white.png" alt="logo">
						</a>
					</div>
				</div>
				<div class="col-lg-9 d-none d-lg-block">
					<div class="main-menu">
						<nav id="nav_mobile_menu">
							<ul id="navigation">
								<li class="active">
									<a href="#home">Home</a>
								</li>
								<li>
									<a href="./game.zip">Downland</a>
								</li>
								<li>
									<a href="#view">View</a>
								<li class="active">
									<a href="#contact">Contact Us</a>
								</li>
								</li>
							</ul>
						</nav>
					</div>
				</div>
				<div class="col-12 d-block d-lg-none">
					<div id="mobile_menu"></div>
				</div>
			</div>
		</div>
	</div>
</header>
<!-- header area end -->

<!-- hero area start -->
<section class="game-hero-area full-height d-flex align-items-center" id="home">
	<div class="container">
		<div class="row">
			<div class="col-md-10 offset-md-1 text-center pos-rel">
				<div class="hero-content">
					

				</div>
			</div>
		</div>
	</div>
	<a href="#contact" class="scrl_me_down">
		<img src="assets/images/icon/angle-down-icon.png" alt="icon">
	</a>
</section>
    <footer id="id_footer">
        Download：1000
    </footer>
<!-- hero area end -->
<!-- about area start -->

<!-- about area end -->
<!-- about area start -->

<!-- about area end -->
<!-- facts area start -->

<!-- facts area end -->
<!-- feature blog area start -->

<!-- feature blog area end -->
<!-- pricing area start -->

<!-- pricing area end -->
<section class="contact-area bg-grayblack ptb--100" id="view">
	<div class="container">
		<div class="gm-title">
			<span>Message send</span>
			<h2>View Game</h2>
		</div>
		<div class="row">
			<div class="col-md-10 offset-md-1">
				<div class="contact-form-area">
					<form action="#">
						<div class="row">
							<div class="col-md-6">
								<h2>Please enter the port you want to link</h2>
					<input type="text" id="edit_url" value="ws://43.142.101.58:12345" />
					<input type="button" id="btn_open" value="Open" onclick="doOpen();show()" />
							</div>
<div id="div1" style="display:none">
    <textarea  id="edit_recv" cols="50" rows="8" ></textarea>
</div>

						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- contact area start -->
<section class="contact-area bg-grayblack ptb--100" id="contact">
	<div class="container">
		<div class="gm-title">
			<span>Locate Us</span>
			<h2>Contact Us</h2>
		</div>
		<div class="row">
			<div class="col-md-10 offset-md-1">
				<div class="contact-form-area">
					<form action="#">
						<div class="row">
							<div class="col-md-6">
								<input type="text" placeholder="Name...">
								<input type="email" placeholder="Email...">
								<input type="text" placeholder="Subject...">
							</div>
							<div class="col-md-6">
								<textarea name="msg" id="msg" placeholder="Message"></textarea>
								<input type="submit" id="submit" value="Send Message">
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</section>

<!-- contact area end -->
<!-- goolge map area start -->
<!-- footer area end -->

<!-- jquery latest version -->
<script src="assets/js/vendor/jquery-2.2.4.min.js"></script>
<!-- bootstrap 4 js -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- others plugins -->
<script src="assets/js/jquery.slicknav.min.js"></script>
<script src="assets/js/counterup.min.js"></script>
<script src="assets/js/waypoints.js"></script>
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/countdown.js"></script>
<script src="assets/js/swiper.min.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/jquery.zoomslider.min.js"></script>
<script src="assets/js/jquery.firefly.js"></script>
<!-- google map -->
<!---<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBO_5h890WNShs_YLGivCBfs2U89qXR-7Y&callback=initMap"></script>--->
<script src="assets/js/scripts.js"></script>
    <script>
        var edit_url = document.getElementById("edit_url");
        var btn_open = document.getElementById("btn_open");
        var edit_recv = document.getElementById("edit_recv");
        var edit_send = document.getElementById("edit_send");

        var client = null;

        function doOpen() {
            console.log("open")
            if (!("WebSocket" in window)) {
                //不支持WebSocket
                return;
            }
            if (client === null) {
                client = new WebSocket(edit_url.value);

                client.onopen = function () {
                    btn_open.value = "Close";
                }
                //收到数据后追加到尾巴上
                client.onmessage = function (event) {
                    edit_recv.value += String(event.data);
                }
                client.onclose = function () {
                    client = null;
                    btn_open.value = "Open";
                }
            } else {
                client.close();
                client = null;
            }
        }

        function doSend() {
            console.log("send")
            if (client === null)
                return;
            client.send(edit_send.value);
        }
    </script>
<script type="text/javascript">

function show()

{

var value = document.getElementById("div1").style.display;

if(value=="none")

{

document.getElementById("div1").style.display="block";

}

else

document.getElementById("div1").style.display="none";

}

</script>
</body>

</html>
